<template>
  <view class="container">
    <view class="box">
      <view class="box_left">收货人</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.name" placeholder="请输入" border="none">
        </uv-input>
      </view>
    </view>
    <view class="box">
      <view class="box_left">手机号</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.phone" placeholder="请输入" border="none">
        </uv-input>
      </view>
    </view>

    <view class="box">
      <view class="box_left">所在地区</view>
      <view class="box_right" @click="showPickerSelect">
        <uv-input v-model="model.userInfo.dizhi" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
        </uv-input>
        <uv-icon name="arrow-right" color="#999999" size="12"></uv-icon>
      </view>
    </view>
    <view class="box">
      <view class="box_left">详细地址</view>
      <view class="box_right">
        <uv-input v-model="model.userInfo.addess" placeholder="例如：3号楼 301" border="none">
        </uv-input>
      </view>
    </view>
    <view class="box">
      <view class="box_left">设为默认收货地址</view>
      <view class="box_right" style="justify-content: flex-end;">
        <uv-switch v-model="model.userInfo.switch" :activeColor="'#30E983'"></uv-switch>
      </view>
    </view>
    <button class="ok_btn flex-center" @tap="ok">保存</button>

    <uv-picker ref="pickerRef" :columns="addressList" :loading="ditu.loading" keyName="name" @change="change"
      @confirm="confirm">
    </uv-picker>
  </view>
</template>

<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app'
  const pickerRef = ref()
  const model = reactive<{
    userInfo : any;
    birthdays : number;
  }>({
    userInfo: {},
    birthdays: 0,
  })

  const ok = () => {

  }
  const showPickerSelect = () => {
    pickerRef.value?.open()
    uni.hideKeyboard()
  }
  const ditu = reactive({
    loading: false,
    provinces: [],//省
    citys: [], //市
    areas: [], //区
    pickerValue: [0, 0, 0],
    defaultValue: [3442, 1, 2]
  })
  const addressList = computed(() => {
    console.log(333)
    return [ditu.provinces, ditu.citys, ditu.areas]
  })
  const getData = () => {
    uni.request({
      method: 'GET',
      url: '/static/uvui/example/regions.json',
      success: res => {
        const { statusCode, data } = res
        if (statusCode === 200) {
          console.log('获取的数据：', res);
          ditu.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
          handlePickValueDefault()
          setTimeout(() => {
            ditu.loading = false
          }, 200)
        }
      }
    })
  }
  const handlePickValueDefault = () => {
    // 设置省
    ditu.pickerValue[0] = ditu.provinces.findIndex(item => Number(item.id) === ditu.defaultValue[0]);
    // 设置市
    ditu.citys = ditu.provinces[ditu.pickerValue[0]]?.children || [];
    ditu.pickerValue[1] = ditu.citys.findIndex(item => Number(item.id) === ditu.defaultValue[1]);
    // 设置区
    ditu.areas = ditu.citys[ditu.pickerValue[1]]?.children || [];
    ditu.pickerValue[2] = ditu.areas.findIndex(item => Number(item.id) === ditu.defaultValue[2]);
    // 重置下位置
    pickerRef.value.setIndexs([ditu.pickerValue[0], ditu.pickerValue[1], ditu.pickerValue[2]], true);
  }
  const change = (e) => {
    if (ditu.loading) return;
    const { columnIndex, index, indexs } = e
    // 改变了省
    if (columnIndex === 0) {
      ditu.citys = ditu.provinces[index]?.children || []
      ditu.areas = ditu.citys[0]?.children || []
      pickerRef.value.setIndexs([index, 0, 0], true)
    } else if (columnIndex === 1) {
      ditu.areas = ditu.citys[index]?.children || []
      pickerRef.value.setIndexs(indexs, true)
    }
  }
  const open = () => {
    pickerRef.value.open();
    handlePickValueDefault()
  }
  const confirm = (e) => {
    console.log('确认选择的地区：', e);
    uni.showToast({
      icon: 'none',
      title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
    })
    model.userInfo.dizhi = `${e.value[0].name},${e.value[1].name},${e.value[2].name}`
  }
  onLoad(() => {
    getData()
  })
</script>

<style lang="less" scoped>
  .container {
    width: 750rpx;
    height: 100%;
    background-color: #f4f4f4;
    padding-top: 20rpx;

    .box {
      display: flex;
      align-items: center;
      width: 750rpx;
      height: 100rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-bottom: 1px solid rgba(#000, .1);

      &:last-child {
        border-bottom: 0;
      }

      &_left {
        min-width: 120rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        margin-right: 20rpx;
      }

      &_right {
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        flex: 1;
      }
    }



    .ok_btn {
      position: fixed;
      bottom: 100rpx;
      left: 0;
      right: 0;
      margin: auto;
      width: 560rpx;
      height: 68rpx;
      background: #228CFE;
      box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 34rpx;
      font-size: 30rpx;
      color: #FFFFFF;


      &:active {
        transform: translateY(2px);
      }
    }
  }
</style>